<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>
    
    ES11 新特性 - DSRBLOG
    
  </title>
  

  
  
  <link href="atom.xml" rel="alternate" title="DSRBLOG" type="application/atom+xml">
  <link rel="stylesheet" href="asset/css/style.min.css">
  <link rel="stylesheet" href="asset/css/doc.css">
  <script src="asset/app.js"></script>


</head>

<body> <section class="ct-body">
	<div class="container">
		<div class="columns is-variable bd-klmn-columns is-4 is-centered">
			<div class="column is-four-fifths">
				<div class="post-body single-content">
					
					<h1 class="title">
						ES11 新特性
					</h1>


					<div class="media">
						
						
						<div class="media-content">
							<div class="content">
								<p>
									<span class="date">2022/10/25 15:32 下午</span>
									

									

									<br />
									<span class="tran-tags">Tags:</span>&nbsp;
									
									<a class="tag is-link is-light">#ES7-11</a>
									

								</p>
							</div>
						</div>

					</div>
				</div>
				<article class="markdown-body single-content">
					<h2><a id="%E7%A7%81%E6%9C%89%E5%B1%9E%E6%80%A7" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>私有属性</h2>
<p>在<code>class</code>类内部的属性名前添加<code>#</code>，使该属性无法在<code>class</code>类的外部被调用</p>
<pre class="line-numbers"><code class="language-js">class Person {
    //公有属性
    name;
    //私有属性
    #age;
    //构造方法
    constructor(name, age) {2022年10月25日
        this.name = name;
        this.#age = age;
    }
    intro() {
        console.log(this.name);
        console.log(this.#age);
    }
}
//实例化
const girl = new Person('咩咩', 17);
console.log(girl.name); //输出：'咩咩'
console.log(girl.#age); //报错

girl.intro(); //正常输出
</code></pre>
<h2><a id="promise-allsettled" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Promise.allSettled</h2>
<p><code>Promise.allSettled</code>方法接受一个<code>Promise</code>的数组，返回的结果是一个<code>Promise</code>对象，该对方永远是成功的状态，成功的值是数组内每一个<code>Promise</code>的状态和值</p>
<ul>
<li>该方法与<code>Promise.all()</code>方法常用于批量异步任务的处理</li>
</ul>
<h3><a id="promise-all" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>Promise.all</h3>
<p><code>Promise.all()</code>是<code>ES6</code>的特性，该方法与<code>Promise.allSettled</code>类似，但数组内任意<code>Promise</code>状态为失败时，<code>.all()</code>方法返回的结果为失败，失败的值是第一个失败的<code>Promise</code>的值</p>
<pre class="line-numbers"><code class="language-js">//声明两个Promise对象
const p1 = new Promise((resolve, reject) =&gt; {
    setTimeout(() =&gt; {
        resolve('商品信息');
    }, 1000)
})
const p2 = new Promise((resolve, reject) =&gt; {
    setTimeout(() =&gt; {
        reject('商品价格');
    }, 1000)
})

//调用Promise.allSettled()方法
const allSettled = Promise.allSettled([p1, p2]);
console.log(allSettled);

/*Promise {&lt;pending&gt;}
    [[Prototype]]: Promise
    [[PromiseState]]: &quot;fulfilled&quot;
    [[PromiseResult]]: Array(2)
        0: {status: 'fulfilled', value: '商品信息'}
        1: {status: 'rejected', reason: '商品价格'}
        length: 2
    [[Prototype]]: Array(0)*/
    
//调用Promise.all()方法
const all = Promise.all([p1, p2]);
console.log(all);

/*Promise {&lt;pending&gt;}
    [[Prototype]]: Promise
    [[PromiseState]]: &quot;rejected&quot;
    [[PromiseResult]]: &quot;商品价格&quot;*/
</code></pre>
<h2><a id="matchall%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>matchAll方法</h2>
<p>该方法用于获取正则批量匹配的结果，返回的结果是一个可迭代对象，需要使用<code>「...」</code>扩展运算符或`for...of``循环展开结果</p>
<h3><a id="%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>使用方法</h3>
<pre class="line-numbers"><code class="language-js">需要匹配的字符串.matchAll(正则表达式)
</code></pre>
<h3><a id="%E7%A4%BA%E4%BE%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>示例</h3>
<pre class="line-numbers"><code class="language-js">let str = `
&lt;ul&gt;
    &lt;li&gt;
        &lt;a&gt;肖生克的救赎&lt;/a&gt;
        &lt;p&gt;上映日期：1994-09-18&lt;/p&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;a&gt;阿甘正传&lt;/a&gt;
        &lt;p&gt;上映日期：1994-07-06&lt;/p&gt;
    &lt;/li&gt;
&lt; /ul&gt;
`;
//声明正则
const reg = /&lt;li&gt;.*?&lt;a&gt;(.*?)&lt;\/a&gt;.*?&lt;p&gt;(.*?)&lt;\/p&gt;/sg;

//调用方法
let result = str.matchAll(reg);

//输出结果
console.log(...result);

for (let i of result) {
    console.log(i);
}
</code></pre>
<h2><a id="%E5%8F%AF%E9%80%89%E9%93%BE%E6%93%8D%E4%BD%9C%E7%AC%A6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>可选链操作符</h2>
<p>当应对<code>Object</code>对象类型的参数，且<code>Object</code>对象的深度较深时，使用<code>「?.」</code>不需要再进行层层判断</p>
<ul>
<li>若应对<code>Object</code>对象类型的参数时不进行层层判断，当未传参时会出现报错</li>
</ul>
<h3><a id="%E5%B8%B8%E8%A7%84%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>常规方法</h3>
<pre class="line-numbers"><code class="language-js">function main(config) {
    const dbHost = config &amp;&amp; config.db &amp;&amp; config.db.host;
    console.log(dbHost); //输出：'127.0.0.1'
}

main({
    db: {
        host: '127.0.0.1',
        port: 3306,
    }
})
</code></pre>
<h3><a id="%E5%8F%AF%E9%80%89%E9%93%BE%E6%93%8D%E4%BD%9C%E7%AC%A6" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>可选链操作符</h3>
<pre class="line-numbers"><code class="language-js">function main(config) {
    const dbHost = config?.db?.host;
    console.log(dbHost); //输出：'127.0.0.1'
}
main({
    db: {
        host: '127.0.0.1',
        port: 3306,
    }
})
</code></pre>
<h2><a id="%E5%8A%A8%E6%80%81import" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>动态import</h2>
<p><code>ES6</code>的模块化是静态的模块系统，无论模块何时使用都会全部引入，无法按需加载（懒加载），而在<code>ES11</code>中增加了动态<code>import</code>的特性，可以实现按需加载</p>
<ul>
<li>动态导入使用的是<code>import()</code>方法，其返回值是<code>Promise</code>对象，成功的值是引入模块中的暴露对象</li>
</ul>
<h3><a id="%E9%A1%B5%E9%9D%A2%E5%86%85%E5%AE%B9" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>页面内容</h3>
<p><strong>/index.html</strong></p>
<pre class="line-numbers"><code class="language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;button type=&quot;button&quot; id=&quot;btn&quot;&gt;点击&lt;/button&gt;
    &lt;script src=&quot;./js/app.js&quot; type=&quot;module&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>
<p><strong>/js/hello.js</strong></p>
<pre class="line-numbers"><code class="language-js">export function hello(){
    alert(&quot;Hello&quot;);
}
</code></pre>
<h3><a id="%E9%9D%99%E6%80%81%E5%AF%BC%E5%85%A5" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>静态导入</h3>
<p><strong>/js/app.js</strong></p>
<pre class="line-numbers"><code class="language-js">//引入模块
import * as module from &quot;./hello.js&quot;;

//获取元素
const btn = document.getElementById('btn');

//调用方法
btn.onclick = function(){
    module.hello();
}
</code></pre>
<h3><a id="%E5%8A%A8%E6%80%81%E5%AF%BC%E5%85%A5" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>动态导入</h3>
<p><strong>/js/app.js</strong></p>
<pre class="line-numbers"><code class="language-js">//获取元素
const btn = document.getElementById('btn');

//绑定事件
btn.onclick = function () {
    //引入模块
    import('./hello.js').then(module =&gt; {
        module.hello();
    })
}
</code></pre>
<h2><a id="bigint%E7%B1%BB%E5%9E%8B" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>BigInt类型</h2>
<p>主要用于更大的数值运算</p>
<ul>
<li>除一元<code>+</code>运算符外，所有算术运算符都可以用于<code>BigInt</code></li>
<li><code>BigInt</code>类型的数值不能直接与普通<code>Int</code>类型进行运算</li>
<li><code>BigInt</code>类型使用等号运算符<code>「==」</code>时会进行隐式转换</li>
<li><code>BigInt</code>类型也可以用二进制、八进制或十六进制表示</li>
</ul>
<h3><a id="%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>使用方法</h3>
<pre class="line-numbers"><code class="language-js">let n = 114514n;
console.log(n, typeof(n)); //输出：114514n 'bigint'
</code></pre>
<h3><a id="bigint%E5%87%BD%E6%95%B0" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>BigInt函数</h3>
<p>将传递给<code>BigInt()</code>函数的参数转换为<code>BigInt</code>类型</p>
<pre class="line-numbers"><code class="language-js">let n = 114514;
console.log(BigInt(n), typeof (BigInt(n))); //输出：114514n 'bigint'
</code></pre>
<h2><a id="%E7%BB%9D%E5%AF%B9%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1globalthis" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>绝对全局对象globalThis</h2>
<p>无论在什么环境下，<code>globalThis</code>变量始终指向全局对象</p>
<h3><a id="%E6%B5%8F%E8%A7%88%E5%99%A8%E7%8E%AF%E5%A2%83" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>浏览器环境</h3>
<p>在浏览器环境下，<code>globalThis</code>始终指向<code>Window</code></p>
<pre class="line-numbers"><code class="language-js">console.log(globalThis);
//输出：Window {window: Window, self: Window, document: document, name: '', location: Location, …}
</code></pre>
<h3><a id="nodejs%E7%8E%AF%E5%A2%83" class="anchor" aria-hidden="true"><span class="octicon octicon-link"></span></a>NodeJs环境</h3>
<p>在NodeJs环境下，<code>globalThis</code>始终指向`Object[global]</p>
<pre class="line-numbers"><code class="language-js">console.log(globalThis)

/*Object[global] {
    global: [Circular * 1],
        clearInterval: [Function: clearInterval],
            clearTimeout: [Function: clearTimeout],
                setInterval: [Function: setInterval],
                    setTimeout: [Function: setTimeout] {
        [Symbol(nodejs.util.promisify.custom)]: [Getter]
    },
    queueMicrotask: [Function: queueMicrotask],
        clearImmediate: [Function: clearImmediate],
            setImmediate: [Function: setImmediate] {
        [Symbol(nodejs.util.promisify.custom)]: [Getter]
    }
}*/
</code></pre>

				</article>
				<div class="comments-wrap">
					<div class="share-comments">
						

						

						
					</div>
				</div><!-- end comments wrap -->
			</div>
		</div><!-- end columns -->
	</div><!-- end container -->
</section>  














<script src="asset/prism.js"></script>









</body>

</html>